<template>
	<view class="container">
		<u-navbar :border-bottom="false" title="我的客服" :background="{ background: 'transparent' }" title-color="#fff"
			back-icon-color="#fff">
		</u-navbar>
		<view class="container_image">
			<u-image :src="url + '/static/image01.jpg'" width="100vw" height="456rpx" mode="widthFix"></u-image>
			<view class="container_image_txt" v-if="data.serviceInfo.name == '暂未分配客服'">
				{{data.serviceInfo.name}}
			</view>
			<view class="container_image_txt" v-else>
				Hi,我是你的专属客服：{{data.serviceInfo.name}}
			</view>
		</view>
		<view class="container_main">
			<u-cell-group>
				<u-cell-item hover-class="none" title="手机号" :value="data.serviceInfo.mobile || data.serviceInfo.tel"
					@click="handleCallPhone"></u-cell-item>
				<u-cell-item hover-class="none" title="微信号" :value="data.serviceInfo.weixin || '暂无'"></u-cell-item>
				<u-cell-item hover-class="none" title="联系QQ" :value="data.serviceInfo.qq || '暂无'"></u-cell-item>
				<u-cell-item hover-class="none" title="投诉客服" value="请填写投诉信息" @click="handleToComplaint"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import development from '/config/development'
	import production from '/config/productions'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		nextTick,
		reactive
	} from "vue";
	const url = process.env.NODE_ENV === 'development' ? development.url : production.url;
	const data = reactive({
		serviceInfo: {}
	})
	onLoad(() => {
		customerService()
	})
	// 拨打电话
	const handleCallPhone = () => {
		uni.makePhoneCall({
			phoneNumber: data.serviceInfo.mobile || data.serviceInfo.tel
		});
	}
	// 去投诉客服页面
	const handleToComplaint = () => {
		uni.$u.route('/pages/pagesPersonal/other/complaint', {
			id: data.serviceInfo.id
		})
	}
	const customerService = async () => {
		let res = await uni.$u.api.customerService()
		data.serviceInfo = res.info
	}
</script>
<style>
	page {
		background-color: #F0EFEF;
	}
</style>
<style scoped lang="scss">
	.container {
		position: relative;

		&_image {
			position: absolute;
			/* #ifdef APP-PLUS */
			top: var(--status-bar-height);
			/* #endif */
			/* #ifndef APP-PLUS */
			top: 0;

			/* #endif */
			&_txt {
				position: absolute;
				top: 45%;
				right: 35%;
				background-color: #C6EBFF;
				border-radius: 20rpx;
				padding: 5rpx 20rpx;
				color: #243EAB;
				font-size: 24rpx;
			}

			&_txt::before {
				position: absolute;
				right: -25rpx;
				top: 5rpx;
				content: '';
				width: 0;
				border: 15rpx solid transparent;
				border-left-color: #C6EBFF;
			}
		}

		&_main {
			padding: 0 32rpx;
			padding-top: 330rpx;
		}
	}
</style>